<template>
  <view v-for="(item,index) in list" :key="item.id">
    <shop-row-item :item="item.product_info" :imgWidth="150" :specShow="false" imgHeight="150"
      @handleClick="handleClick(item)">
      <template #price>
        <view class="u-flex-y-center u-flex-between">
          <text>{{item.pay_gold}}积分</text>
          <text>已兑换</text>
        </view>
      </template>
    </shop-row-item>
  </view>
</template>

<script setup>
  import { onBeforeUnmount, onMounted, ref } from 'vue';
  import shopRowItem from '../components/shop-row-item.vue';
  import { storeList } from '../../../config/api';
  import { onReachBottom } from '@dcloudio/uni-app'
  const params = ref({
    page: 1,
    limit: 15
  })
  const list = ref([])
  const modal = ref({})
  onMounted(() => {
    _storeList()
  })
  onReachBottom(() => {
    params.value.page++
    _storeList()
  })
  // 兑换记录
  const _storeList = () => {
    storeList(params.value).then(res => {
      if (params.value.page == 1) list.value = res.data.data
      else list.value = list.value.concat(res.data.data)
    })
  }
  // 详情
  const handleClick = (item) => {
    modal.value = item
    uni.$u.route(`/pages/index/integralShop/createOrder?type=2&id=${item.id}`)
  }
</script>

<style lang="scss" scoped>
  text {
    font-size: 32rpx;
    color: #ea0000;
  }

  text+text {
    font-size: 26rpx;
    color: #666;
    font-weight: 500;
  }
</style>